<template>
  <div class="app-page">
    <el-form ref="form" class="searchForm" :inline="true" :model="query" label-width="80px">
      <el-form-item label="所属机构:" prop="orgSNNo">
        <el-tree-select
          v-model="query.orgSNNo"
          :clearable="false"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
            loading: $loadingPlugin.getTreeData,
          }"
          :tree-params="{
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props: {
              value: 'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData,
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>
      <el-form-item class="statisticsTime" label="统计时间" prop="statisticsTime">
        <el-date-picker
          v-model="query.statisticsTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-permission="1" type="primary" icon="el-icon-search" :loading="$loadingPlugin.search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="frame">
      <iframe v-if="url" :src="url" frameborder="0" width="100%" height="100%" />
    </div>

  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import dayjs from 'dayjs'
  import { gasCheckReportDetail } from '@/api'
  import { mapGetters } from 'vuex'

  export default {
    name: 'securityReport',
    data() {
      return {
        url: '',
        mechanismList: [],
        customerType: [{ label: '全部', value: -1 }],
        treeData: [],
        query: {
          mechanism: '',
          customerType: -1,
          orgSNNo: '',
          statisticsTime: dayjs(new Date()).format('YYYY-MM-DD')
        }
      }
    },
    computed: {
      ...mapGetters(['orgList'])
    },
    created() {
      this.getTreeData()
      this.search()
    },
    methods: {
      // 获取组织机构数据
      async getTreeData() {
        const data = this.orgList.map((item) => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
        this.query.orgSNNo = this.orgList && this.orgList[0].orgSNNo
        this.selectTreeChange(this.orgList[0])
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.orgName = value.orgName
        this.search()
      },
      async search() {
        this.url = ''
        const param = {
          m: '801990049',
          orgSNNo: this.query.orgSNNo,
          orgName: this.orgName,
          queryDate: this.query.statisticsTime
        }
        const res = await gasCheckReportDetail(param)
        if (res && res.data) {
          this.url = res.data
        }
      },
      reset() {
        this.$refs.form.resetFields()
        this.search()
      }

    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  flex-direction: column;
  .searchForm {
    & /deep/ .el-form-item__label {
      font-size: 14px;
      font-weight: normal;
      color: #333;
    }
    .mechanism {
      width: 300px;
    }
    .genre,
    .type {
      width: 100px;
    }
  }
}
.frame {
  height: 100%;
}
</style>
